<template>
  <div class="container">
    <!--订单 筛选-->
    <div class="orderScreen">
      <!--下拉菜单标题-->
      <van-nav-bar title="订单记录" v-if="!showPopup"> </van-nav-bar>
      <!--下拉菜单内容-->
      <van-dropdown-menu v-if="!showPopup" >
        <!--订单菜单-->
        <van-dropdown-item :title="orderTitle">
          <div class="row">
            <van-row type="flex" justify="center" gutter="10">
              <van-col span="5.5">
                <van-button class="btn " @click="orderType='all';orderTitle='全部订单'" :class="{active:orderTitle=='全部订单'}">全部订单</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" @click="orderType='notFinished';orderTitle='未出单'" :class="{active:orderType=='notFinished'}" >未出订单</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" @click="orderType='finished';orderTitle='已出单'" :class="{active:orderType=='finished'}">已出订单</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" @click="orderType='profitOrder';orderTitle='盈利订单'" :class="{active:orderType=='profitOrder'}"> 盈利订单</van-button>
              </van-col>
            </van-row>
          </div>
        </van-dropdown-item>
        <van-dropdown-item :title="platformTitle">
          <div class="row">
            <van-row type="flex" justify="center" gutter="10" class="row-z">
              <van-col span="5.5">
                <van-button class="btn " @click="orderType='all';platformTitle='全部平台'" :class="{active:orderType=='all'}">全部平台</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" @click="orderType='Amazon';platformTitle='Amazon'" :class="{active:orderType=='Amazon'}">Amazon</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" @click="orderType='eBay';platformTitle='eBay'" :class="{active:orderType=='eBay'}">eBay</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" @click="orderType='Target';platformTitle='Target'" :class="{active:orderType=='Target'}">Target</van-button>
              </van-col>
            </van-row>
            <van-row type="flex" justify="center" gutter="10" class="row-z">
              <van-col span="5.5">
                <van-button class="btn" @click="orderType='BestBuy';platformTitle='BestBuy'" :class="{active:orderType=='BestBuy'}">BestBuy</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" @click="orderType='Walmart';platformTitle='Walmart'" :class="{active:orderType=='Walmart'}">Walmart</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" @click="orderType='IKEA';platformTitle='IKEA'" :class="{active:orderType=='IKEA'}">IKEA</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" @click="orderType='NetFlix';platformTitle='NetFlix'" :class="{active:orderType=='NetFlix'}">NetFlix</van-button>
              </van-col>
            </van-row>
            <van-row type="flex" justify="center" gutter="10" class="row-z">
              <van-col span="5.5">
                <van-button class="btn" @click="orderType='Newegg';platformTitle='Newegg'" :class="{active:orderType=='Newegg'}">Newegg</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" @click="orderType='Sears';platformTitle='Sears'" :class="{active:orderType=='Sears'}">Sears</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn"></van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn"></van-button>
              </van-col>
            </van-row>
          </div>
        </van-dropdown-item>
        <van-dropdown-item :title="dayTitle">
          <div class="row">
            <van-row type="flex" justify="center" gutter="10">
              <van-col span="5.5">
                <van-button class="btn " @click="orderType='all';dayTitle='所有日期'" :class="{active:orderType=='all'}">所有日期</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" @click="orderType='3days';dayTitle='近三日'" :class="{active:orderType=='3days'}">近三天</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" @click="orderType='7days';dayTitle='近七日'" :class="{active:orderType=='7days'}">近七天</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" @click="orderType='oneMonth';dayTitle='近一月'" :class="{active:orderType=='oneMonth'}">近一月</van-button>
              </van-col>
            </van-row>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <!--content-->
    <div class="content" v-if="!showPopup">
      <OrderList @toOrderInfo="toOrderInfo" @toOrderInfoED="edfn" :orderType="orderType"></OrderList>
    </div>
    <!--未出单、已出单-->
    <van-popup
      v-model="showPopup"
      position="bottom"
      duration="0"
      round
      :lock-scroll="false"
    >
      <OrderInfo @closePopup="showPopup = false" :orderItme="orderItme"></OrderInfo>
    </van-popup>
  </div>
</template>

<script>
import OrderInfo from "./components/OrderInfo";
import OrderList from "./components/OrderList";
export default {
  name: "OrderRecord",
  components: {
    OrderList,
    OrderInfo,
  },
  data() {
    return {
      showPopup: false,
      orderTitle:'全部订单',
      dayTitle:'所有日期',
      platformTitle:'全部平台',
      orderType:'全部订单',
      orderItme:''
    };
  },
  methods: {
    toOrderInfo(item) {
      this.showPopup = true;
      this.orderItme=item
    },
    edfn(){
      this.showPopup = true
      this.type='ed'
    }
  },
};
</script>
<style scoped lang="less">
.container {
  background-color: #efefef;
  .orderScreen {
    width: 100%;
    height: 188px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    .btn {
      width: 160px;
      height: 70px;
      border-radius: 12px;
      background-image: linear-gradient(180deg, #ffffff, #fdfdfd, #fcfafa);
      font-size: 13px;
    }
    .active{
      background-image: linear-gradient(182deg,#FA7D22,#FA461B);
      color: #fff;
    }
    .row {
      padding: 40px 20px;
    }
    .row-z {
      margin-bottom: 20px;
    }
  }
  .content {
    height: 1000px;
    margin-top: 239px;
    overflow-y: scroll;
  }
  
}
</style>
